{% extends "layout.html" %}
{% block headcenter %}
  <h4><a href="/prj/{{ g.prjprojid }}">{{ g.prjtitle }}</a></h4>
{% endblock %}

{% block body %}

<h2>更新元数据（步骤1）</h2>

<div class="help-block">
	<div class="row">
		<div class="col-sm-12">

			<p><a href="#general-help" data-toggle="collapse" class="help">帮助</a></p>
			<div id="general-help" class="collapse">
			
			<p>使用此页面可以更新与已导入图片关联的元数据。此流程类似于导入图片流程，只是您不能处理图片。该流程使用object_id字段完成与现有对象的链接。

            </p>

			
			
			</div>

		</div>
	</div>
</div>

<form class="form" method="post" enctype="multipart/form-data">

	<div class="row" style="margin: 5px">
		<div class="col-sm-5">
  <div class="form-group">
				<label class="control-label">在服务器上选择文件夹或zip文件</label>
      <div class="input-group">
					<input type="text" class="form-control" id="ServerPath" name="ServerPath" value="" size="200">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"  data-toggle="modal" data-target="#FileModal">
					<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></button>
                </span>
				</div>
				<p class="help-block">联系项目管理员，了解如何通过FTP上传你的数据。导入完成后，可手动在FTP服务器上删除这些数据。
				<br>项目管理员 : {{ g.prjmanagermailto |safe }}</p>
			</div>
		</div>

		<div class="col-sm-2" style="text-align: center">
			<label class="control-label">或者</label>
		</div>

		<div class="col-sm-5">
<div class="form-group">
				<label class="control-label">上传压缩为zip文件的文件夹</label>
				<input class="form-control" type="file" id="uploadfile" name="uploadfile" size="200">
				<p class="help-block">仅用于 &lt;&nbsp;100MB zip文件.</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-sm-offset-2">

<div class="form-group">
				<div class="checkbox">
					<label>
						<input type="checkbox" id="updateclassif" name="updateclassif" value="Y">允许更新分类数据
					</label>
    </div>

			<p><a href="#advanced" data-toggle="collapse" class="help">高级选项</a></p>
			<div id="advanced" class="collapse">
				<div class="form-group">
					<label for="port" class="control-label">可选的分类法映射</label>
					<p class="help-block">这允许更改先前分类的对象的类别名称，以匹配应用程序中包含的UniEuk分类框架中的名称。<br>例:<br>
					crust_cop = Copepoda<br>
					gelatinous medusae = Cnidaria (Hydrozoa)</p>
 <table><tr><td>导入的名称 : <input type="text" id="oldname" class="form-control" style="width: 100px;display: inline-block;">
  UniEuk名称 :&nbsp; </td><td ><div class="input-group" >
            <select id="taxolb" name="taxolb" style="width: 210px" class='taxolb' > </select>
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="button"  data-toggle="modal" data-target="#TaxoModal" data-mytargetid="taxolb">
                    <span id=OpenTaxoLB class="glyphicon glyphicon-th-list" aria-hidden="true"></span></button>
                </span>
          </div><!-- /input-group -->
          </td><td>
            <button class="btn btn-primary " type="button" onclick="TaxoHelperBtAdd();">加入列表</button>
          </td>
          </tr></table>
					<textarea class="form-control" id="TxtTaxoMap" name="TxtTaxoMap" rows="4" placeholder="oldname = UniEuk name"></textarea>
				</div>
			</div>

    <input type="hidden" name="starttask" value="Y">
			<button type="submit" class="btn btn-lg btn-block btn-primary">开始导入</button>
    </div>
  </div>

</form>

<script>
function TaxoHelperBtAdd(){
  var s=$('#oldname').val()+"="+$('#taxolb option:selected').text();
  var txt=$('#TxtTaxoMap');
  txt.val( txt.val() +s+ "\n");
}

$(document).ready(function() {
    $('#FileModal').on('show.bs.modal', function () {
        $("#TaxoModalBody").html(""); {# Pour eviter les conflit sur le jstree suite à des ouverture successive car le jstree est dans la modal cachée #}
         $("#FileModalBody").html("Loading...").load("/common/ServerFolderSelect");
    });
    $(".taxolb").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
    }); // Select2 Ajax
    $('#TaxoModal').on('show.bs.modal', function () {
         $("#FileModalBody").html("");
         $("#TaxoModalBody").html("Loading...").load("/search/taxotree?target=taxolb");
    });
  }); // Ready
</script>

<!-- Modal -->
<div class="modal " id="FileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">选择一个文件夹或一个zip文件</h4>
      </div>
      <div class="modal-body">
        <div id="FileModalBody">...</div>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal " id="TaxoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">分类树</h4>
      </div>
      <div class="modal-body">
        <div id="TaxoModalBody">...</div>
      </div>
    </div>
  </div>
</div>



{% endblock %}